<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/echarts.min.js"></script>
    <style>
        html,body{
            height: 100%;
        }
    </style>
</head>
<body>
<div style="position: absolute;left: 40%;">
    <select id="time" style="width: 120px;height: 25px" >

    </select>
    <select id="con" style="width: 120px;height: 25px">
        <option value="0">确诊人数</option>
        <option value="1">治愈人数</option>
        <option value="2">死亡人数</option>
    </select>
    <button type="button" onclick="bing()">查询</button>
</div>

<!--创建一个容器-->
<div id="main" style="position: absolute;top:50px;width: 100%;height: 100%";></div>
</body>
</html>
<script>
    //定义jquery文档加载事件
    $(function(){
        //执行查询时间函数
        LoadTime();
    })
    //饼图 函数
    function bing(){
        //获取选中的查询时间
        var time = $("#time").val();
        //获取选中的查询条件
        var con = $("#con").val();
        //发送ajax请求
        $.ajax({
            url:"/info/bingAjax",
            type:"get",
            data:{"time":time,"con":con},
            dataType:"json",
            success:function(data){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    //color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
                    title: {
                        text: '统计新冠肺炎的各省治愈人数',
                        subtext: time,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '疫情数据',
                            type: 'pie',
                            radius: '50%',
                            data: data.info,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                //根据查询条件 修改图标的标题
                if (con==0){
                    option.title.text = "统计新冠肺炎的各省确诊人数";
                }else if (con==1)
                {
                    option.title.text = "统计新冠肺炎的各省治愈人数";
                }else
                {
                    option.title.text = "统计新冠肺炎的各省死亡人数";
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    }

    //查询时间
    function LoadTime(){
        //发送ajax请求
        $.ajax({
            url:"/info/time",
            type:"get",
            datatype:"json",
            success:function(data){
                //创建一个拼接字符串的变量
                var html="";
                //遍历服务端传来的集合数据，就是json数据
                for(var i=0;i<data.length;i++){
                    html+="<option value='"+data[i].time+"'>"+data[i].time+"</option>"
                }
                //把html加载到下拉框
                $("#time").html(html);
                //执行饼图函数
                bing();
            }
        })
    }
</script>